<template>
	<view class="order_card">
		<view class="tab_two" v-if="type === 'two'">
			<view class="two_head" @click="routeDetails">
				<view class="">
					<checkbox value="cb" color="#F59F54 " :checked="false" @change="ckeck"
						style="border-color:#F59F54 ; border-radius: 50%;" />
				</view>
				<view class="date">
					{{myInfo.route_name}}
				</view>
				<text v-if="myInfo.status" style="color: #999999; font-size: 28rpx;">任务已创建</text>
				<view style="margin-left: 20rpx;" @click="clickOrderCard()">
					<uni-icons type="arrowright" size="18" color="#999"></uni-icons>
				</view>
			</view>
		</view>
		<view class="order_derails_card">
			<view class="head" v-if="type === 'one'">
				<view class="">
					<checkbox value="cb" color="#F59F54 " :checked="myInfo.choose" @change="ckeckCancel"
						style="border-color:#F59F54 ; border-radius: 50%;" />
				</view>
				<view class="date">
					下单时间：{{myInfo.create_time | timeFormat('YYYY-MM-DD HH:mm:ss')}}
				</view>
				<view class="button" @click="cancel">
					取消
				</view>
				<xbd-popup :isShow="showDialog" @dialogConfirm="dialogConfirm" @dialogCancel="dialogCancel"
					content="确定取消这个订单吗？" cancelText="取消" confirmText="确定">
				</xbd-popup>
			</view>
			<!-- <view class="head" v-else-if="type === 'two'">
				派车时间：2021-12-28 12:21:09
			</view> -->
			<view class="head" v-else-if="type === 'three'">
				<view>
					下单时间：{{myInfo.create_time | timeFormat('YYYY-MM-DD HH:mm:ss')}}
				</view>
				<view class="button bt2" @click="open" >
					开箱取件
				</view>
				<xbd-popup :isShow="showDialog" @dialogConfirm="dialogConfirm_two" @dialogCancel="dialogCancel"
					content="确认开箱取件？" cancelText="取消" confirmText="确定">
				</xbd-popup>
			</view>
			<view class="head" v-else-if="type === 'four'">
				<view>
					下单时间：{{myInfo.create_time | timeFormat('YYYY-MM-DD HH:mm:ss')}}
				</view>
				<view class="button text">
					<text v-if="myInfo.complete_status === 2">已取消</text>
					<text v-else-if="myInfo.complete_status === 0">滞留</text>
					<text v-else-if="myInfo.complete_status === 1">已完成</text>
				</view>
			</view>
			<view class="content" v-if="type !== 'two'" @click="clickOrderCard()">
				<view class="type">
					<view class="left">
						电话
					</view>
					<view class="right">
						{{myInfo.phone}}
					</view>
				</view>
				<view class="type">
					<view class="left">
						姓名
					</view>
					<view class="right">
						{{myInfo.username}}
					</view>
				</view>
				<view class="type">
					<view class="left">
						收货站点
					</view>
					<view class="right">
						{{myInfo.receiving_site}}
					</view>
				</view>
				<view class="type">
					<view class="left">
						店铺
					</view>
					<view class="right">
						{{myInfo.shop}}
					</view>
				</view>
				<view class="type">
					<view class="left">
						配送车辆
					</view>
					<view class="right">
						{{myInfo.car_name || "-"}}
					</view>
				</view>
				<view class="type">
					<view class="left">
						格口
					</view>
					<view class="right">
						{{myInfo.cabinet || "-"}}
					</view>
				</view>
			</view>
			
			<!-- 待入车 -->
			<view class="content" v-else  @click="clickOrderCard()">
				
			
			<view v-for="(item,index) in myInfo.order_list" :key="index" >
				<view style="font-size: 24rpx; color: #394954; padding: 20rpx 0; border-top: 2rpx solid #E8E8E8;">
					下单时间：{{item.create_time | timeFormat('YYYY-MM-DD HH:mm:ss')}}
				</view>
				<view class="type">
					<view class="left">
						电话
					</view>
					<view class="right">
						{{item.phone}}
					</view>
				</view>
				<view class="type">
					<view class="left">
						姓名
					</view>
					<view class="right">
						{{item.username}}
					</view>
				</view>
				<view class="type">
					<view class="left">
						收货站点
					</view>
					<view class="right">
						{{item.receiving_site}}
					</view>
				</view>
				<view class="type">
					<view class="left">
						店铺
					</view>
					<view class="right">
						{{item.shop}}
					</view>
				</view>
				<view class="type">
					<view class="left">
						配送车辆
					</view>
					<view class="right">
						{{item.car_name || "-"}}
					</view>
				</view>
				<view class="type">
					<view class="left">
						格口
					</view>
					<view class="right">
						{{item.cabinet || "-"}}
					</view>
				</view>
			</view>
			</view>
			
		</view>
	</view>

</template>

<script>
	import { DeliveryOrder } from '@/api/index.js';
	export default {
		name: "OrderDerailsCard",
		props: {
			myInfo: Object,
			type: String
		},
		data() {
			return {
				flag : true,
				showDialog: false,
				info:{}
			}
		},
		methods: {
			routeDetails(){
				this.$emit('routeDetails')
			},
			open() {
				this.showDialog = true
			},
			cancel() {
				this.showDialog = true
			},
				
			ckeckCancel(e){
				if(e.detail.value){
					uni.$emit('ckeckWaitTrue',this.myInfo.order_id)
				}else{
					uni.$emit('ckeckWaitFalse',this.myInfo.order_id)
				}
			}, 
			ckeck(e){
				if(e.detail.value){
					uni.$emit('ckeckRouteTrue',this.myInfo.order_id)
				}else{
					uni.$emit('ckeckRouteFalse',this.myInfo.order_id)
				}
			},
			dialogConfirm_two() {
				if(this.flag){
				this.flag = false
				this.info={
					order_id: this.myInfo.order_id, //订单ID
					box_index: this.myInfo.cabinet, //格口编号
					type: "2" //完成类型-0完成 1滞留 2开箱取件
				}
				this.openBox()
				}
				this.showDialog = false;
			},
			dialogConfirm() {
				if(this.flag){
				this.flag = false
				this.info={
					order_id: this.myInfo.order_id, //订单ID
					type: "0" //完成类型-0-待入车界面 1-动态路线详情界面
				}
				this.cancelOrder()
				}
				this.showDialog = false;
			},
			// 开箱取件
			async openBox(){
				try {
						this.$showLoading('加载中');
						const res = await DeliveryOrder.postCompleteOrder(this.info);
						uni.hideLoading();
						if(!res.success){
							this.flag = true
							this.$showToast(res.msg);
						}else{
							uni.$emit('successOut', this.myInfo.order_id);
						}
						
					} catch (err) {
						this.flag = true
						uni.showToast({
							title: err.msg,
							icon: 'none',
						})
					}
				
			},
			//取消订单
			async cancelOrder(){
				try {
						this.$showLoading('加载中');
						const res = await DeliveryOrder.postCancelOrder(this.info);
						if(res.success){
						uni.$emit('CancelOrder',this.myInfo.order_id)
						uni.hideLoading();
						}else{
							this.flag = true
							uni.showToast({
							title: res.msg,
							icon: 'none',
						})
						}
						
					} catch (err) {
						uni.showToast({
							title: err.msg,
							icon: 'none',
						})
						setTimeout(() => {
							uni.hideLoading();
						}, 1000)
					}
			},
			dialogCancel() {
				this.showDialog = false;

			},
			clickOrderCard() {
				this.$emit('clickOrderCard')
			},
		}
	}
</script>

<style lang="scss" scoped>

	.two_head{
		box-sizing: border-box;
		padding: 20rpx 40rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 28rpx;
		background-color: #FFFFFF;
		.date {
			flex: 1;
			margin-left: 30rpx;
			
		}
	}

	.order_derails_card {
		box-sizing: border-box;
		padding: 0 40rpx;
		background-color: #FFFFFF;
		margin-bottom: 20rpx;

		.head {
			border-bottom: 2rpx solid #E8E8E8;
		}

		.content {
			padding-bottom: 5rpx;
			box-sizing: border-box;

			.type {
				display: flex;
				justify-content: space-between;
				font-size: 28rpx;
				margin-bottom: 20rpx;

				.left {
					color: #BBC0C9;
				}

				.right {
					color: #394954 10000%;
				}
			}
		}
	}


	.head {
		box-sizing: border-box;
		padding: 20rpx 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 28rpx;
		margin-bottom: 20rpx;
		background-color: #FFFFFF;

		.date {
			flex: 1;
			margin-left: 30rpx;
			
		}

		.button {
			width: 108rpx;
			height: 44rpx;
			line-height: 40rpx;
			text-align: center;
			box-sizing: border-box;
			border-radius: 8rpx;
			border: 2rpx solid #457AFF;
			color: #457AFF;
		}

		.bt2 {
			width: 140rpx !important;
		}

		.text {
			border-color: #FFFFFF !important;
		}
	}
</style>
